<template>
	<view class="home-container">
		<!-- 搜索框 -->
		<view class="search-section">
			<uni-search-bar
				v-model="searchKeyword"
				placeholder="搜索电影..."
				@confirm="handleSearch"
				bgColor="#ffffff"
				color="#333333"
			></uni-search-bar>
		</view>

		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper
				class="banner-swiper"
				:indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="500"
				indicator-color="rgba(255, 255, 255, 0.5)"
				indicator-active-color="#ff6b35"
			>
				<swiper-item v-for="(banner, index) in banners" :key="index" @click="handleBannerClick(banner)">
					<image :src="banner.image" class="banner-image" mode="aspectFill"></image>
					<view class="banner-overlay">
						<text class="banner-title">{{ banner.title }}</text>
						<text class="banner-subtitle">{{ banner.subtitle }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 优惠券/活动区域 -->
		<view class="coupon-section">
			<view class="coupon-title">
				<uni-icons type="gift" size="20" color="#ff6b35"></uni-icons>
				<text class="coupon-text">限时优惠</text>
			</view>
			<scroll-view scroll-x="true" class="coupon-scroll">
				<view class="coupon-list">
					<view
						v-for="(coupon, index) in coupons"
						:key="index"
						class="coupon-item"
						@click="handleCouponClick(coupon)"
					>
						<view class="coupon-content">
							<text class="coupon-amount">{{ coupon.amount }}</text>
							<text class="coupon-desc">{{ coupon.description }}</text>
						</view>
						<view class="coupon-action">
							<text class="coupon-btn">{{ coupon.status }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 推荐电影区域 -->
		<view class="recommend-section">
			<view class="section-header">
				<text class="section-title">为你推荐</text>
				<text class="section-more" @click="goToCategory">更多 ></text>
			</view>
			<scroll-view scroll-x="true" class="recommend-scroll">
				<view class="recommend-list">
					<view
						v-for="movie in recommendMovies"
						:key="movie.id"
						class="recommend-item"
						@click="goToDetail(movie)"
					>
						<image :src="movie.poster" class="recommend-poster" mode="aspectFill"></image>
						<view class="recommend-info">
							<text class="recommend-title">{{ movie.title }}</text>
							<view class="recommend-rating">
								<uni-icons type="star-filled" size="12" color="#ff6b35"></uni-icons>
								<text class="rating-text">{{ movie.rating }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 分类按钮 -->
		<view class="category-section">
			<view class="category-title">电影分类</view>
			<view class="category-buttons">
				<button
					v-for="category in categories"
					:key="category.id"
					class="category-btn"
					:class="{ active: currentCategory === category.id }"
					@click="switchCategory(category.id)"
				>
					{{ category.name }}
				</button>
			</view>
		</view>

		<!-- 热门电影列表 -->
		<view class="movie-section">
			<view class="section-title">热门电影</view>
			<view class="movie-grid">
				<view
					v-for="movie in filteredMovies"
					:key="movie.id"
					class="movie-item"
					@click="goToDetail(movie)"
				>
					<image :src="movie.poster" class="movie-poster" mode="aspectFill"></image>
					<view class="movie-info">
						<text class="movie-title">{{ movie.title }}</text>
						<text class="movie-year">{{ movie.year }}</text>
						<text class="movie-rating">评分: {{ movie.rating }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义底部导航栏 -->
		<custom-tabbar :current="0"></custom-tabbar>
	</view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { useMovieStore } from '@/stores/movie.js'

export default {
	components: {
		CustomTabbar
	},
	data() {
		return {
			searchKeyword: '',
			currentCategory: 'all'
		}
	},
	setup() {
		const movieStore = useMovieStore()
		return {
			movieStore
		}
	},
	computed: {
		categories() {
			return this.movieStore.categories
		},
		banners() {
			return this.movieStore.banners
		},
		coupons() {
			return this.movieStore.coupons
		},
		recommendMovies() {
			return this.movieStore.getRecommendMovies
		},
		movies() {
			return this.movieStore.movies
		},
		filteredMovies() {
			let movies = this.movies

			// 按分类筛选
			if (this.currentCategory !== 'all') {
				movies = movies.filter(movie => movie.category === this.currentCategory)
			}

			// 按搜索关键词筛选
			if (this.searchKeyword.trim()) {
				movies = movies.filter(movie =>
					movie.title.toLowerCase().includes(this.searchKeyword.toLowerCase())
				)
			}

			return movies
		}
	},
	onLoad() {
		this.checkLoginStatus()
		this.initData()
	},
	onShow() {
		this.checkLoginStatus()
		this.initData()
	},
	methods: {
		// 初始化数据
		initData() {
			this.movieStore.initMovieData()
		},

		checkLoginStatus() {
			const userInfo = uni.getStorageSync('userInfo')

			// 如果没有登录信息，跳转到登录页
			if (!userInfo || (!userInfo.isLogin && !userInfo.isGuest)) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		},

		switchCategory(categoryId) {
			this.currentCategory = categoryId
		},

		handleSearch() {
			console.log('搜索关键词:', this.searchKeyword)
		},

		goToDetail(movie) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${movie.id}`
			})
		},

		goToCategory() {
			uni.navigateTo({
				url: '/pages/category/category'
			})
		},

		goToProfile() {
			uni.navigateTo({
				url: '/pages/profile/profile'
			})
		},

		handleBannerClick(banner) {
			if (banner.movieId) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${banner.movieId}`
				})
			}
		},

		handleCouponClick(coupon) {
			if (coupon.status === '立即领取') {
				uni.showModal({
					title: '领取优惠券',
					content: `确定要领取${coupon.amount}${coupon.description}吗？`,
					success: (res) => {
						if (res.confirm) {
							// 模拟领取成功
							coupon.status = '已领取'
							uni.showToast({
								title: '领取成功',
								icon: 'success'
							})
						}
					}
				})
			} else {
				uni.showToast({
					title: '您已领取过该优惠券',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style scoped>
.home-container {
	background: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 100rpx;
}

.search-section {
	padding: 20rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #e0e0e0;
}

/* 轮播图样式 */
.banner-section {
	margin-bottom: 20rpx;
}

.banner-swiper {
	height: 360rpx;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.banner-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	padding: 40rpx 30rpx 30rpx;
}

.banner-title {
	color: #ffffff;
	font-size: 32rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.banner-subtitle {
	color: rgba(255, 255, 255, 0.8);
	font-size: 24rpx;
}

/* 优惠券样式 */
.coupon-section {
	background: #ffffff;
	padding: 30rpx 20rpx;
	margin-bottom: 20rpx;
}

.coupon-title {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.coupon-text {
	color: #333333;
	font-size: 32rpx;
	font-weight: bold;
	margin-left: 10rpx;
}

.coupon-scroll {
	white-space: nowrap;
}

.coupon-list {
	display: flex;
	gap: 20rpx;
}

.coupon-item {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #ff6b35, #ff8c42);
	border-radius: 12rpx;
	padding: 20rpx;
	min-width: 200rpx;
	box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
}

.coupon-content {
	flex: 1;
}

.coupon-amount {
	color: #ffffff;
	font-size: 28rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 5rpx;
}

.coupon-desc {
	color: rgba(255, 255, 255, 0.9);
	font-size: 22rpx;
}

.coupon-action {
	margin-left: 15rpx;
}

.coupon-btn {
	color: #ffffff;
	font-size: 20rpx;
	padding: 8rpx 16rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

/* 推荐区域样式 */
.recommend-section {
	background: #ffffff;
	padding: 30rpx 20rpx;
	margin-bottom: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	color: #333333;
	font-size: 32rpx;
	font-weight: bold;
}

.section-more {
	color: #ff6b35;
	font-size: 24rpx;
}

.recommend-scroll {
	white-space: nowrap;
}

.recommend-list {
	display: flex;
	gap: 20rpx;
}

.recommend-item {
	width: 200rpx;
}

.recommend-poster {
	width: 100%;
	height: 280rpx;
	border-radius: 12rpx;
	margin-bottom: 15rpx;
}

.recommend-info {
	text-align: center;
}

.recommend-title {
	color: #333333;
	font-size: 24rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recommend-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5rpx;
}

.rating-text {
	color: #ff6b35;
	font-size: 22rpx;
	font-weight: bold;
}

.category-section {
	padding: 30rpx 20rpx;
	background: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	margin: 0 20rpx 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.category-title {
	color: #333333;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.category-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.category-btn {
	padding: 15rpx 30rpx;
	background: #f8f8f8;
	color: #666666;
	border: 1rpx solid #e0e0e0;
	border-radius: 25rpx;
	font-size: 26rpx;
}

.category-btn.active {
	background: #ff6b35;
	color: #ffffff;
	border-color: #ff6b35;
}



.movie-section {
	padding: 30rpx 20rpx;
	background: #ffffff;
	margin: 0 20rpx 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.movie-section .section-title {
	color: #333333;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.movie-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.movie-item {
	background: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.movie-poster {
	width: 100%;
	height: 300rpx;
}

.movie-info {
	padding: 20rpx;
}

.movie-title {
	color: #333333;
	font-size: 28rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.movie-year {
	color: #999999;
	font-size: 24rpx;
	display: block;
	margin-bottom: 8rpx;
}

.movie-rating {
	color: #ff6b35;
	font-size: 24rpx;
	font-weight: bold;
}
</style>
